import React, { ReactNode, ReactElement } from "react";
import { Tooltip as AntTooltip } from "antd";
import type { TooltipProps as AntTooltipProps } from "antd";

// 导出类型，与 Ant Design 名称保持一致以避免混淆
export type TooltipPlacement = AntTooltipProps["placement"];

export interface TooltipProps {
  /** Tooltip 显示的内容 */
  content: ReactNode;
  /** 被包裹的元素 */
  children: ReactElement;
  /** 气泡框位置 */
  placement?: TooltipPlacement;
  /** 触发行为 */
  trigger?: "hover" | "click" | "focus" | "contextMenu";
  /** 显示延迟，单位毫秒 */
  mouseEnterDelay?: number;
  /** 隐藏延迟，单位毫秒 */
  mouseLeaveDelay?: number;
  /** 自定义样式类名 */
  className?: string;
  /** 自定义气泡背景色 */
  color?: string;
  /** 是否有箭头 */
  arrow?: boolean | { pointAtCenter: boolean };
  /** 最大宽度 */
  overlayStyle?: React.CSSProperties;
  /** 是否显示 */
  open?: boolean;
  /** 默认是否显示 */
  defaultOpen?: boolean;
  /** 禁用 */
  disabled?: boolean;
  /** 气泡显示隐藏的回调 */
  onOpenChange?: (visible: boolean) => void;
  /** Z-index */
  zIndex?: number;
  /** 浮层渲染父节点 */
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
}

/**
 * 基于 Ant Design 的 Tooltip 组件
 *
 * @see https://ant.design/components/tooltip-cn
 */
const Tooltip: React.FC<TooltipProps> = ({
  content,
  children,
  placement = "top",
  trigger = "hover",
  mouseEnterDelay = 0.1,
  mouseLeaveDelay = 0.1,
  className,
  color,
  arrow = false, // 默认不显示箭头
  overlayStyle,
  open,
  defaultOpen,
  disabled,
  onOpenChange,
  zIndex,
  getPopupContainer,
}) => {
  // 确保不要渲染被禁用的 tooltip
  if (disabled) {
    return children;
  }

  return (
    <AntTooltip
      title={content}
      placement={placement}
      trigger={trigger}
      mouseEnterDelay={mouseEnterDelay}
      mouseLeaveDelay={mouseLeaveDelay}
      overlayClassName={className}
      color={color}
      arrow={arrow}
      overlayStyle={{
        ...overlayStyle,
        maxWidth: overlayStyle?.maxWidth || 250,
      }}
      open={open}
      defaultOpen={defaultOpen}
      onOpenChange={onOpenChange}
      zIndex={zIndex}
      getPopupContainer={getPopupContainer}
    >
      {children}
    </AntTooltip>
  );
};

export default Tooltip;
